<template>
  <div id="tmpl">
      <!-- 1.0实现图片详情和缩略图 -->
      <div id="desc">
          <div class="title">
              <h4>{{photoinfo.title}}</h4>
              <p>
                  {{photoinfo.add_time | datefmt('YYYY-MM-DD hh:mm:ss')}}  {{ photoinfo.click}}次浏览
              </p>
              <p class="line"></p>
          </div>
      </div>
        <!-- 缩略图 -->
       <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in list" >
                        <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index,list)">
		            </li>
		            
		        </ul> 
		</div>
        <!-- 图片详情摘要部分 -->
        <p v-html="photoinfo.content"></p>
      <!-- 2.0评论模块 -->
      <div id="content">
          <comment id="id"></comment>
      </div>
  </div>
</template>

<script>
//导入评论组件
import comment from '../subcom/comment.vue';
import common from '../../kits/common.js';
import {Toast} from 'mint-ui';
export default {
    components:{
        comment //注册评论组件
    },
    data(){
        return{
            id:0,
            photoinfo:{},   //图片的详细数据对象
            list:[
                
            ]  //存储缩略图的数据
        }
    },
    created(){
        this.id = this.$route.params.id;
        //请求图片详情的数据
        this.getinfo();
        this.getimgs();
    },
    methods:{
        //1.0获取图片详细数据
    getinfo(){
        var url = common.apidomain + '/api/getimageInfo/'+this.id;
        this.$http.get(url).then(function(res){
             if(res.body.status!=0){
                  Toast(res.body.message);
                  return;
              }
              this.photoinfo = res.body.message[0];
        })
    },
        //2.0获取缩略图的数据
    getimgs(){
        var url = common.apidomain + '/api/getthumimages/'+this.id;
         this.$http.get(url).then(function(res){
             if(res.body.status!=0){
                  Toast(res.body.message);
                  return;
              };
              res.body.message.forEach(function(item){
                 
                //   var img = document.createElement('img');
                //   img.src = item.src;
                //   item.h=item.height;
                //   item.w=item.width;
                item.h=300;
                item.w = 300;
              })
              this.list = res.body.message;
        })
    }
    }
}
</script>

<style scoped>
#desc{
    padding: 10px;
}
#desc h4{
    color:#0094ff;
}
#desc .title p{
    color:rgba(0,0,0,.4);
    margin-top: 10px;

}
.line{
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,.4);
}
.mui-content ul {
  background-color: #fff;
}
.mui-grid-view.mui-grid-9 {
  border-top: 0px;
  border-left: 0px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border-right: 0px;
  border-bottom: 0px;
}

/* 缩略图的样式 */
.mui-content img{
    width: 100px;
    height: 100px;
}
</style>


